import React, { Component } from 'react'
import { Popup, Icon } from 'antd-mobile'
import { TopNavHeader } from '../common'
import { PositionParticulars } from './'

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent)
let wrapProps
if (isIPhone) {
  // Note: the popup content will not scroll.
  wrapProps = {
    // onTouchStart: e => e.preventDefault(),
  }
}

export default class PositionPage extends Component {
  render() {
    return (
      <div className={`rt-position-list-container cm-flex-container`}>
        <TopNavHeader title="持仓明细" />

        <div className={`rt-account-balance`}>
          账户余额：3,686.90元
        </div>

        <div className={`rt-position-title`}>持仓情况</div>

        <div className={`rt-scrollable-container`}>
          <div className={`rt-position-box`}>
            <div className={`rt-top-box`}>
              <span>9月19日 15:00</span>
              <div>
                <span>3KG工业银 5手</span>
                <span className={`rt-updown`}>涨</span>
              </div>
              <span className={`rt-gross-profit`}>+24</span>
            </div>

            <div className={`rt-bottom-box`}>
              <span>止盈：20%</span>
              <span>止损：30%</span>
              <span>开仓价格：3433</span>
              <span className={`rt-operator-btn`}>操作</span>
            </div>
          </div>

          {
            Array(1).fill(3).map(v => (
              <div key={Math.random()} className={`rt-position-box`}>
                <div className={`rt-top-box`}>
                  <span>9月19日 15:00</span>
                  <div>
                    <span>3KG工业银 5手</span>
                    <span className={`rt-updown rt-down`}>跌</span>
                  </div>
                  <span className={`rt-gross-profit rt-nagetive`}>-12</span>
                </div>

                <div className={`rt-bottom-box`}>
                  <span>止盈：20%</span>
                  <span>止损：30%</span>
                  <span>开仓价格：3433</span>
                  <span className={`rt-operator-btn`} onClick={this.popup}>操作</span>
                </div>
              </div>
            ))
          }
        </div>
        
        <PositionParticulars />
      </div>
    )
  }
  popup() {
    Popup.show(
      <div className={`top-position-operate-box`}>
        <div className={`top-banner-box`}>
          <div className={`top-left-box`}>
            <span className={`top-identity`}>当前仓位ID</span>
            <span>480</span>
          </div>
          <span className={`top-goods-name`}>3KG 工业银</span>
        </div>

        <div className={`top-operate-btn`}>平仓</div>
        <div className={`top-operate-btn`}>修改</div>
        <div className={`top-operate-btn`} onClick={() => console.log('xq')}>详情</div>
        <div className={`top-operate-btn top-cancle-operate`}>
          <Icon onClick={() => Popup.hide()} type="cross-circle" />
        </div>
      </div>,
      { animationType: 'slide-up', wrapProps, maskClosable: false }
    )
  }
}